<template>
  <div class="addMenus">
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="活动名称">
        <el-input class="input" v-model="form.title"></el-input>
      </el-form-item>
      <el-form-item label="活动名称">
        <el-date-picker
          v-model="time"
          type="datetimerange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :default-time="['12:00:00']"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="一级分类">
        <el-select
          @change="onChange"
          v-model="form.first_cateid"
          placeholder="请选择上级菜单"
        >
          <el-option label="请选择" disabled value="-1"> </el-option>
          <el-option
            v-for="item in arr1"
            :key="item.id"
            :label="item.catename"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="二级分类" prop="second_cateid">
        <el-select
          @change="towChange(form.second_cateid)"
          v-model="form.second_cateid"
          placeholder="请选择上级菜单"
        >
          <el-option label="请选择" disabled value="-1"> </el-option>
          <el-option
            v-for="item in arr2"
            :key="item.id"
            :label="item.catename"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="商品" prop="goodsid">
        <el-select v-model="form.second_cateid" placeholder="请选择上级菜单">
            <el-option label="请选择" disabled value="-1"> </el-option>
          <el-option
            v-for="item in arr3"
            :key="item.id"
            :label="item.goodsname"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-switch
        class="mode"
        v-model="form.status"
        inactive-text="状态"
        :active-value="1"
        :inactive-value="2"
      >
      </el-switch>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">添加</el-button>
        <el-button type="info" @click="back">返回</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import {
  getOneListApi,
  getTwoListApi,
  addSeckillApi,
  getGoodsApi
} from "@/api/seckill";
export default {
  data() {
    return {
      arr1: [],
      arr2: [],
      arr3: [],
      time: "",
      fid:'',
      form: {
        title: '',
        begintime:'',
        endtime: '',
        first_cateid: "",
        second_cateid: "",
        goodsid: '',
        status: 1,
      },
    };
  },
  mounted() {
    this.getOneList();
  },
  methods: {
    //提交添加事件
    async onSubmit() {
        let temp1=this.time[0].getTime()
        let temp2=this.time[1].getTime()
        this.form.begintime=temp1
        this.form.endtime=temp2
        let res= await addSeckillApi(this.form)
        if (res.code == 200) {
        this.$message({
          message: res.msg,
          type: 'success'
        });
        this.clearFormData()
      } else {
        this.$message({
          message: res.msg,
          type: "warning",
        });
      }
    },
    //获取一级商品分类列表
    async getOneList() {
      let res = await getOneListApi();
      if (res.code == 200) {
        this.arr1 = res.list;
        console.log(res.list, "一级");
      } else {
        this.$message({
          message: res.msg,
          type: "warning",
        });
      }
    },
    //获取二级商品分类列表
    async getTwoListApi(pid) {
      let res = await getTwoListApi({ params: { pid } });
      if (res.code == 200) {
        console.log(res.list,"二级分类");
        this.arr2 = res.list;
      } else {
        this.$message({
          message: res.msg,
          type: "warning",
        });
      }
    },
    //获三级分类的商品数据
    async getGoods(obj) {
      let res = await getGoodsApi(obj);
      if (res.code == 200) {
        this.arr3 = res.list
        console.log(res.list, "三级")
      } else {
        this.$message({
          message: res.msg,
          type: "warning",
        });
      }
    },
    //清除表单
    clearFormData() {
      this.form = {
        title: '',
        begintime:'',
        endtime: '',
        first_cateid: "",
        second_cateid: "",
        goodsid: '',
        status: 1,
      }
      this.getOneList();
    },
    //返回
    back() {
      this.$router.push("/seckill");
    },
    //一级下拉框值改变
    onChange(val) {
      this.getTwoListApi(val);
      this.fid=val
    },
    //二级改变对应的属性页改变
   async towChange(val) {
      /* this.form.goodsid=val */
      let obj={fid:this.fid,sid:val}
      this.getGoods(obj)
      console.log(obj);
  }
  }
}
</script>
<style scoped lang="less">
.addMenus {
  .input {
    width: 40%;
  }
  .mode {
    margin: 0 0 30px 12px;
  }
}
/deep/ .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
/deep/ .avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
/deep/ .avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
#desc {
  width: 70%;
}
</style>
